<template>
  <div class="chart-color-selector">
    <el-dropdown trigger="click" placement="bottom-end">
      <span class="el-dropdown-link">
        <div class="selected">
          <span
            v-for="(item, index) in currentColorList"
            :key="index"
            :style="{background: item}"
            class="color-list"/>
          <i class="el-icon-arrow-down el-icon--right" style="position: absolute; right: 12px;"/>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-if="hasRouteAuth('chart:departEdit:color')" class="color-drodown add-dropdown">
            <div class="add-color">
              <PlainCreateBtn class="btn" @click="oepnDialog()">添加主题色</PlainCreateBtn>
            </div>
          </el-dropdown-item>
          <div class="scroll">
            <el-dropdown-item v-for="(item, index) in chartColorList" :key="index" class="color-drodown">
              <div class="flex-container">
                <div class="flex-container" @click="handleCommand(item.label)">
                  <div class="select-option">
                    <span
                      v-for="(list, index) in item.colors"
                      :key="index"
                      :style="{background: list}"
                      class="color-list"/>
                  </div>
                  <span v-if="item.name" class="color-name">{{ item.name }}</span>
                </div>
                <div v-if="item.isCanEdit && hasRouteAuth('chart:departEdit:color')" class="btn-list">
                  <div class="button-text edit-icon" style="margin-right: 6px;" @click="oepnDialog(item.id, item.colors)"/>
                  <div class="button-text del-icon" @click="deleteItem(item.id)" />
                </div>
              </div>
            </el-dropdown-item>
          </div>
        </el-dropdown-menu>
      </span>
    </el-dropdown>
    <SetColorDialog ref="colorDialogRef" is-theme />
  </div>
</template>
<script>
import { deleteChartColor } from '@/api/reportManage';
import ElMessage, { showModal } from '@/utils/message';
import Title from '@/components/Title';
import SetColorDialog from '@/components/ReportManage/setColorDialog';
import { hasRouteAuth } from '@/utils/permission';

export default {
  name: 'ChartColorSelector',
  components: { Title, SetColorDialog },
  model: {
    prop: 'currentIndex',
    event: 'changeValue'
  },
  props: {
    currentIndex: {
      type: [String, Number],
      default: ''
    },
    chartColorList: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    currentColorList() {
      const item = this.chartColorList.find(i => {
        return i.label === this.currentIndex;
      });
      return item ? item.colors : this.chartColorList[0].colors;
    }
  },
  methods: {
    hasRouteAuth,
    handleCommand(command) {
      this.$emit('changeValue', command);
    },
    updateColor() {
      this.$store.dispatch('GetColorList');
    },
    oepnDialog(id = null, colorsValue = []) {
      if (!id && this.chartColorList.length >= 26) {
        ElMessage.error('最多可新增20种主题色');
        return;
      }
      this.$refs.colorDialogRef.oepnDialog(id, colorsValue);
    },
    deleteItem(id) {
      showModal('是否确定删除', '', {
        iconClass: 'del-icon'
      }).then(() => {
        deleteChartColor({ id }).then(res => {
          ElMessage.success('删除成功');
          this.updateColor();
        });
      }).catch(() => {
        return false;
      });
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.chart-color-selector {
  width: 240px;
  height: 32px;
  border: 1px solid #dcdfe6;
  padding-left: 12px;
  border-radius: 4px;
}
.color-list {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 3px;
  border-radius: 2px;
}
.selected, .select-option {
  display: flex;
  align-items: center;
  height: 32px;
}
.select-option {
  border: 1px solid #eee;
  padding-left: 3px;
  border-radius: 2px;
}
.selected {
  width: 228px;
}
.el-popper[x-placement^="bottom"] {
  margin-top: 1px;
}
.el-dropdown-menu__item {
  padding: 0 16px 0 12px;
}
.flex-container {
  display: flex;
  align-items: center;
}
.btn-list {
  display: flex;
  align-items: center;
  margin-left: 8px;
  .edit-icon,.del-icon {
    width: 18px;
    height: 18px;
    background-size: 100%;
  }
  .edit-icon {
    background-image: url('~@/assets/chartsTheme/edit-plain-unselect.png');
    &:hover {
      background-image: url('~@/assets/chartsTheme/edit-plain.png');
    }
  }
  .del-icon {
    background-image: url('~@/assets/chartsTheme/delete-plain-unselect.png');
    &:hover {
      background-image: url('~@/assets/chartsTheme/delete-plain.png');
    }
  }
}
.add-dropdown {
  background-color: #fff !important;
}
.add-color {
  display: flex;
  justify-content: center;
  margin-bottom: 5px;
  padding-bottom: 7px;
  border-bottom: 1px solid #ebeefd;
  .btn {
    width: 100%;
  }
}
.color-name {
  color: #333333;
  font-size: 14px;
  margin-left: 8px;
}
.scroll {
  max-height: 300px;
  @include scrollBar($x: hidden, $y: auto);
}
</style>
